@mixin background-mirror(
  $position: 0%,
  $size: auto,
  $axis: horizontal 
) {

  background-size: 0; // Hide 'true' background
  position: relative;
  // Seeing weird bug in Chrome with values other than `no-repeat`
  background-repeat: no-repeat;
  
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: inherit;
    background-size: $size;
    background-repeat: inherit;
    @if ($axis == "horizontal") {  
      background-position: $position 100% ;
    } @elseif ($axis == "vertical") {
      background-position: $position 100%;
    }
    
  }

  &::before {
    @if ($axis == "horizontal") {  
      bottom: 50%;
    } @elseif ($axis == "vertical") {
      bottom: 50%;
    }
  }

  &::after {
    @if ($axis == "horizontal") {  
      left: 50%;
      transform: scalex(-1);
    } @elseif ($axis == "vertical") {
      top: 50%;
      transform: scaleY(-1);
    }
  }
}

h2 {
  color: #ddd;
  margin: 0;
  padding: 0.2em 0.7em;
  font-size: 1.65em;
  line-height: 1.5;
  text-transform: uppercase;
  background: #222;
  position: fixed !important;
  bottom: 1.5em; left: 50%;
  transform: translatex(-50%);
  display: inline-block;
  z-index: 2;
}
      
.reverse {
  display: inline-block;
  transform: scaleX(-1);
}
      
 

body {
            background-image: url("images/trip.jpg");
            background-color: #6e508d;
            @include background-mirror(50%, cover);
			@include background-mirror2(100%, cover);
			font-family: Arial, sans-serif;
			background-repeat: inherit;
            background-color: #6e508d;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
}

 
html,body{height:100%;width:100%;}
        .container {
            text-align: center;
            background-color: #efefef;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
        }
        .profile-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        h1 {
            font-size: 24px;
            margin: 10px 0;
        }
        .link-button {
            display: block;
            background-color: #847f89;
            color: white;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            text-decoration: none;
            font-size: 18px;
        }
        .link-button:hover {
            background-color: #8a4583;
        }
		.container:hover {
			background-color: #d69ad0;
		}